<template>
  <el-button type="primary" @click="add">新增线索</el-button>
  <el-button type="success" @click="importExcel">导入线索(Excel)</el-button>
  <el-button type="danger">批量删除</el-button>

  <el-table
      ref="multipleTableRef"
      :data="clueList"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" />
    <el-table-column fixed prop="index" label="序号" type="index" width="55px"/>
    <el-table-column property="ownerDO.name" label="负责人" />
    <el-table-column property="activityDO.name" label="所属活动" />
    <el-table-column property="fullName" label="姓名" />
    <el-table-column property="appellationDO.typeValue" label="称呼" />
    <el-table-column property="phone" label="手机" />
    <el-table-column property="weixin" label="微信" />
    <el-table-column property="needLoanDO.typeValue" label="是否贷款" />
    <el-table-column property="intentionStateDO.typeValue" label="意向状态" />
    <el-table-column property="intentionProductDO.name" label="意向产品" />
    <el-table-column property="stateDO.typeValue" label="线索状态" />
    <el-table-column property="sourceDO.typeValue" label="线索来源" />
    <el-table-column property="nextContactTime" label="联系时间" />
    <el-table-column  fixed="right" property="address" label="操作" show-overflow-tooltip>
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)" v-has-permission="'clue:edit'">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)" v-has-permission="'clue:delete'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"
  >
  </el-pagination>

  <el-dialog v-model="importExcelDialogVisible" title="导入线索Excel" width="50%" center draggable>
    <el-upload
        ref="uploadRef"
        :http-request="uploadFile"
        :auto-upload="false"
        method="post"
    >
      <template #trigger>
        <el-button type="primary">选择Excel文件</el-button>
      </template>
      仅支持后缀名为.xls或.xlsx的文件
      <template #tip>
        <div class="fileTip">
          重要提示：
            <ul>
              <li>仅支持后缀名为.xls或.xlsx的文件；</li>
              <li>给定Excel文件的第一行将视为字段名；</li>
              <li>请确认您的文件大小不超过50MB；</li>
              <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式</li>
              <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss</li>

            </ul>
        </div>
      </template>
    </el-upload>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="importExcelDialogVisible=false">关 闭</el-button>
        <el-button type="primary" @click="submitExcel">上传</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {doDelete, doGet, doPost} from "../http/httpRequest.js";
import {massageTip} from "../utils/util.js";

export default {
  inject: ['reload'],
  name: "ClueView",
  data(){
    return {
      clueList: [{
        ownerDO: {},   // 负责人
        activityDO: {},  // 活动
        applicationDO: {},  // 称呼
        needLoanDO: {},  // 是否需要贷款
        intentionStateDO: {}, // 意向状态
        intentionProductDO: {},  // 意向产品
        stateDO: {},  // 状态
        sourceDO: {}  // 来源
      }],
      // 每页数量
      pageSize: 0,
      // 总数量
      total: 0,
      // 导入Excel表
      importExcelDialogVisible: false
    }
  },
  mounted() {
    this.getData(1)
  },
  methods: {
    handleSelectionChange(){},
    getData(current){
      doGet('/api/clues',{
        // 当前查询的页数
        current: current
      }).then((resp)=>{
        if (resp.data.code===200){
          this.clueList=resp.data.data.list;
          this.pageSize=resp.data.data.pageSize;
          this.total=resp.data.data.total;
        }
      })
    },
    // 分页函数
    toPage(current){
      this.getData(current)
    },

    // 导入Excel表
    importExcel(){
      this.importExcelDialogVisible=true;
    },

    // 上传文件
    uploadFile(param){
      console.log(param)
      let file = param.file;
      let formData = new FormData();
      formData.append('file',file);
      doPost('/api/importExcel',formData).then(resp=>{
        if (resp.data.code===200){
          massageTip('上传成功','success')

          // 清理上传成功的文件
          this.$refs.uploadRef.clearFiles();
          // 页面刷新
          this.reload();
        }else {
          massageTip('上传失败','error')
        }
      })

    },

    // 提交上传Excel文件
    submitExcel(){
      this.$refs.uploadRef.submit();
    },

    // 新增线索
    add(){
      this.$router.push('/dashboard/clue/add')
    },

    // 编辑线索
    edit(id){
      this.$router.push('/dashboard/clue/edit/'+id)
    },

    // 线索详情
    view(id){
      this.$router.push('/dashboard/clue/detail/'+id)
    },

    // 删除线索
    del(id){
      doDelete('/api/clue/'+id,{}).then(resp=>{
        if (resp.data.code===200){
          massageTip('删除成功','success')
          this.reload();
        }else {
          massageTip('删除失败','error')
        }
      })
    }
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 10px;
  overflow-x: auto !important;
}
.el-pagination {
  margin-top: 15px;
}
.fileTip {
  padding-top: 15px;
}
</style>